<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>DingDing Admin</title>
    <div th:include="includeJs::bootstrap_js"></div>
    <div th:include="includeJs::layui_js"></div>
    <script src='https://cloud.tinymce.com/5/tinymce.min.js?apiKey=your_API_key'></script>
    <script>
        tinymce.init({
            selector: '#mytextarea'
        });
    </script>
</head>
<body>
    <div class="container-scroller d-flex">
        <div th:replace="includeJs::admin_leftNav"></div>
        <div id="addAdvert" class="layui-form" style="display:none;z-index: 999">
            <form  class="layui-form" id="gg" action="">
                <div class="layui-row layui-col-space5" style="margin: 10px;">
                    <div class="layui-col-md5">
                        <div class="grid-demo grid-demo-bg1">
                            <div class="layui-form-item">
                                <label class="layui-form-label">公告</label>
                                <div class="layui-input-block">
                                    <input type="text" name="title"  lay-verify="required" autocomplete="off" lay-reqtext="填啊！！！" placeholder="请输入标题" class="layui-input">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="grid-demo">
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <input type="text" name="img" hidden id="img_url"  />
                                    <button type="button" class="layui-btn layui-btn-danger" id="test7"><i class="layui-icon"></i>上传图片</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row layui-col-space5" style="margin: 10px;">
                    <div class="layui-form-item layui-form-text">
                            <textarea class="layui-textarea layui-hide" lay-reqtext="填啊！！！(事不过三)" name="content"  lay-verify="content"  id="ggcontent" ></textarea>
                    </div>
                </div>
                <div  class="layui-row layui-col-space5">
                    <div style="left: 40%;" class="layui-col-md4">
                        <div class="grid-demo">
                            <button type="submit" class="layui-btn layui-btn-normal" lay-submit id="btn-adevert" lay-filter="demo1">立即提交</button>
                        </div>
                    </div>
                </div>
            </form>

        </div>
        <div class="container-fluid page-body-wrapper">
            <div th:replace="includeJs::admin_nav"></div>
            <div class="main-panel">
                <div class="content-wrapper">
                    <div class="col-sm-5 grid-margin stretch-card">
                        <button type="button" id="add"  class="btn btn-info">添加</button>
                        <div style="left: 10px" class="btn-group">
                            <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">Dropdown</button>
                            <div class="dropdown-menu">
                                <a class="dropdown-item">Go back</a>
                                <a class="dropdown-item">Delete</a>
                                <a class="dropdown-item">Swap</a>
                            </div>
                        </div>
                    </div>
                    <div th:each="list:${obj}" class="col-lg-12 grid-margin stretch-card" >
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;" th:text="${list.title}">顶部对齐的媒体</font></font></h4>
                                <p class="card-description">
                                    <font th:text="${#dates.format(list.release_time,'yyyy-MM-dd')}"></font>
                                </p>
                                <div class="media">
                                    <i class="mdi mdi-earth icon-md text-info d-flex align-self-start mr-3"></i>
                                    <div class="media-body">
                                        <p class="card-text" style="width: 800px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                                            <font style="vertical-align: inherit;" th:text="${list.content}">

                                            </font>
                                        </p>
                                    </div>
                                </div>

                                <div  style="float: right">
                                    <a type="button" target="_blank" th:href="@{/admin/selNotice/{id}(id=${list.n_id})}" class="btn btn-inverse-success btn-fw btn-sm">查看</a>
                                    <a type="button" th:href="@{/admin/delNotice/(id=${list.n_id})}" class="btn btn-inverse-danger btn-fw btn-sm">删除</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div style="position: relative;left: 3%;" class="template-demo">
                            <div class="btn-group pb-2 pb-lg-0" role="group" aria-label="Basic example">
                                <a type="button" class="btn btn-primary" th:href="@{/admin/advert/(page=${page.page}-1)}"><i class="mdi mdi-arrow-left-bold"></i></a>
                                <a type="button" class="btn btn-primary" th:each="index:${#numbers.sequence(1,page.pageAll)}" th:text="${index}" th:href="@{/admin/advert/(page=${index})}"></a>
                                <a type="button" class="btn btn-primary" th:href="@{/admin/advert/(page=${page.page}+1)}"><i class="mdi mdi-arrow-right-bold"></i></a>
                                <a type="button" class="btn btn-primary" href="#" th:text="${'当前页:'+page.page+'/'+page.pageAll}" ></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
<script>
    layui.use([ 'element', 'table', 'layer', 'form' ,'laydate','upload','layedit'],function() {
        var element = layui.element;
        var layer = layui.layer;
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var upload = layui.upload;
        var layedit =layui.layedit;

        $("#add").click(function () {
            layer.open({
                type:1,
                title:'添加新的广告',
                skin: 'layui-layer-demo', //样式类名
                closeBtn:1, //不显示关闭按钮
                area: ['800px', '600px'],
                fixed: false, //不固定
                maxmin: true,
                shadeClose: false, //开启遮罩关闭
                content: $('#addAdvert'),
                cancel: function(index, layero){
                    $("#gg")[0].reset();
                    layui.form.render();
                    layer.close(index);
                    return false;
                }
            });
            var index = layedit.build('ggcontent',{
                tool: [
                    'strong' //加粗
                    ,'italic' //斜体
                    ,'underline' //下划线
                    ,'del' //删除线

                    ,'|' //分割线

                    ,'left' //左对齐
                    ,'center' //居中对齐
                    ,'right' //右对齐
                    ,'link' //超链接
                    ,'unlink' //清除链接
                ]
            }); //建立编辑器
            form.on('submit(demo1)', function(data){
                $(this).removeClass("layui-btn-normal");
                $(this).addClass("layui-btn-disabled");
                this.disabled = true;
                $.post("/admin/addNotice",{"title":data.field.title,"img":data.field.img,"content":layedit.getContent(index)},function (data) {
                    if(data == "ok"){
                        location.reload();
                        layer.msg("发布成功");
                        $("#gg")[0].reset();
                        layui.form.render();
                        $(this).removeClass("layui-btn-disabled");
                        $(this).addClass("layui-btn-normal");
                        this.disabled = false;
                        layer.close(index);
                    }
                },"text");
                return false;
            });
        });

        upload.render({
            elem: '#test7' //绑定元素
            ,url: "/admin/uploadImg?type=2"
            ,images:"images"
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功
                //console.log(res.url);
                $("#img_url").val(res.url);
            }
        });



    });
</script>
</html>